@use "../../../tokens";

.wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.waitlistSection {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: tokens.$spacing-lg;
  padding: tokens.$layout-md tokens.$spacing-md;

  .waitlistTitle {
    text-align: center;
    font: tokens.$text-title-2xs;
    font-weight: 600;
    line-height: 1.4;
    font-family: var(--font-inter);
    color: tokens.$color-purple-70;
  }

  a {
    align-self: center;
  }
}

.navbar {
  font: tokens.$text-body-xl;
  padding: tokens.$layout-xs;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  background-color: tokens.$color-grey-05;
  ul {
    display: flex;
    flex-direction: column;
    a {
      text-decoration: none;
      color: tokens.$color-grey-50;
    }
  }
  @media screen and (min-width: tokens.$screen-sm) {
    justify-content: flex-end;
    ul {
      flex-direction: row;
      justify-content: flex-end;
      a {
        margin-left: tokens.$spacing-lg;
      }
    }
  }
  @media screen and (min-width: tokens.$screen-md) {
    padding: tokens.$layout-xs tokens.$layout-xl;
    ul {
      a {
        margin-left: tokens.$spacing-xl;
      }
    }
  }
}
.hero {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: tokens.$spacing-lg;
  padding-inline: tokens.$spacing-md;
  padding-block-start: tokens.$spacing-xl;
  width: 100%;
  background-position: bottom center;
  background-size: cover;
  background-image: radial-gradient(
    circle at center,
    rgba(184, 51, 225, 0.08) 0,
    rgba(144, 89, 255, 0.08) 37.1%,
    rgba(91, 109, 248, 0.08) 61.4%,
    rgba(0, 144, 237, 0.08) 100%
  );

  @media screen and (min-width: tokens.$screen-lg) {
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    gap: tokens.$layout-lg;
    padding-inline: tokens.$layout-lg;

    .heroContent {
      flex: 1 1 tokens.$content-sm;
    }

    .heroImage {
      flex: 1 1 tokens.$content-sm;
      align-self: flex-end;
    }
  }

  @media screen and (min-width: tokens.$screen-xl) {
    gap: tokens.$layout-xl;
    padding-inline: tokens.$layout-xl;
  }

  .heroContent {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: tokens.$spacing-md;
    max-width: tokens.$screen-xl * 0.5;

    h1 {
      font: tokens.$text-title-md;
      color: tokens.$color-grey-60;
    }

    p {
      font: tokens.$text-body-lg;
      color: tokens.$color-grey-50;
    }
  }

  .heroImage {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    max-width: min(tokens.$screen-xl / 2, 100%);
    padding-inline: tokens.$spacing-md;

    .heroImageBadge {
      position: absolute;
      top: 33%;
      left: -1 * tokens.$layout-xs;
      background-color: tokens.$color-green-90;
      color: tokens.$color-white;
      border-radius: tokens.$border-radius-md;
      box-shadow: tokens.$box-shadow-sm;
      aspect-ratio: 1 / 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: tokens.$spacing-sm;

      @media screen and (max-width: tokens.$screen-xs) {
        display: none;
      }

      .nr {
        font: tokens.$text-title-md;
      }

      .description {
        font: tokens.$text-body-sm;
        width: tokens.$layout-xl;
      }
    }
  }
}

.plans {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: tokens.$spacing-lg;
  background-color: tokens.$color-grey-05;
  padding: tokens.$layout-lg 0;

  .planName,
  .lead,
  table {
    width: tokens.$content-lg;
    max-width: 100%;
  }

  .planName,
  .lead {
    padding-inline: tokens.$spacing-lg;
    text-align: center;
  }
}

.quoteWrapper {
  padding: tokens.$layout-lg tokens.$spacing-md;
  display: flex;
  justify-content: center;

  @media screen and (min-width: tokens.$content-md) {
    padding: tokens.$layout-lg;
  }

  .quote {
    max-width: tokens.$content-lg;
    text-align: center;
    font: tokens.$text-title-3xs;
    line-height: 1.4;
    font-family: var(--font-inter);
    font-weight: normal;

    h2 {
      .emphasis {
        display: inline;
        color: tokens.$color-violet-50;
      }
    }
  }
}

.valuePropositionWrapper {
  .item {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: space-between;
    padding: tokens.$spacing-2xl tokens.$spacing-md;
    gap: tokens.$spacing-lg;

    &.grayBg {
      background: tokens.$color-grey-05;
    }

    .exposureTypeList {
      font-weight: 600;
      color: tokens.$color-purple-70;
      display: inline;
    }

    @media screen and (min-width: tokens.$screen-md) {
      padding-inline: tokens.$layout-lg;
      padding-block: tokens.$layout-sm;
      flex-direction: row;
      gap: tokens.$spacing-xl;

      &.reverseRow {
        flex-direction: row-reverse;
      }

      @media screen and (min-width: tokens.$screen-lg) {
        padding-inline: tokens.$layout-lg;
        gap: tokens.$layout-xl;

        @media screen and (min-width: tokens.$screen-xl) {
          padding-inline: tokens.$layout-xl;
        }
      }
    }

    span {
      gap: tokens.$spacing-md;
      display: flex;
      flex-direction: column;

      h2 {
        font: tokens.$text-title-xs;
        font-family: var(--font-inter);
        font-weight: 600;
      }

      p {
        font: tokens.$text-body-lg;
      }
    }

    .illustration {
      width: 100%;
      display: flex;
      justify-content: center;

      img {
        height: auto;
      }
      @media screen and (min-width: tokens.$screen-md) {
        flex: 1;
      }
    }

    @media screen and (min-width: tokens.$screen-md) {
      span,
      .illustration {
        flex: 1;
      }
    }
  }
}

.socialProofWrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: tokens.$spacing-2xl tokens.$spacing-md;
  gap: tokens.$spacing-sm;
  text-align: center;

  .pressLogos {
    padding-top: tokens.$layout-md;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: tokens.$spacing-lg;
    align-items: center;
    justify-content: center;

    @media screen and (min-width: tokens.$content-md) {
      flex-direction: row;
      flex-wrap: nowrap;
    }

    .label {
      @include tokens.uppercase-only-english;
      flex-basis: 100%;
      font: tokens.$text-body-sm;
      color: tokens.$color-grey-30;
      font-weight: 600;
      text-align: center;

      @media screen and (min-width: tokens.$content-md) {
        flex-basis: auto;
      }
    }
  }
}

.heresHowWeHelpWrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: tokens.$spacing-2xl tokens.$spacing-md;
  gap: tokens.$spacing-sm;
  background-color: tokens.$color-grey-05;
  text-align: center;

  ul {
    list-style: none;
    padding: 0;
    gap: tokens.$spacing-md;
    padding-top: tokens.$layout-sm;
    display: grid;
    text-align: start;

    li {
      display: flex;
      gap: tokens.$spacing-md;
      align-items: center;

      svg {
        min-width: 20px; // width of check icon
        color: tokens.$color-blue-50;
      }
    }
  }

  .heresHowWeHelpCta {
    margin-top: tokens.$layout-sm;
  }
}

.scanLimitWrapper {
  display: flex;
  flex-direction: column;
  gap: tokens.$layout-xs;

  .info {
    display: flex;
    flex-direction: column;
    gap: tokens.$spacing-md;

    @media screen and (min-width: tokens.$screen-md) {
      flex-direction: row;
    }

    b {
      @include tokens.uppercase-only-english;
      white-space: nowrap;
      align-self: flex-start;
      border-radius: tokens.$border-radius-sm;
      font: tokens.$text-body-sm;
      font-weight: 600;
      background: tokens.$color-purple-70;
      color: tokens.$color-white;
      padding: tokens.$spacing-sm tokens.$spacing-md;

      @media screen and (min-width: tokens.$screen-md) {
        align-self: center;
      }
    }
  }
}

.waitlistCta {
  align-self: flex-start;

  @media screen and (min-width: tokens.$screen-md) {
    min-width: 200px; // width of waitlist button
  }
}

.signUpEncouragementWrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: tokens.$layout-sm;
  background-color: tokens.$color-purple-05;
  padding: tokens.$layout-md tokens.$spacing-md;
  text-align: center;

  .title {
    font: tokens.$text-title-2xs;
    font-family: var(--font-inter);
    font-weight: 500;
  }

  .waitlistCta {
    align-self: center;
  }
}
